<script setup>
import SvgFilled from '@/icons/SvgFilled.vue'
import ImagePng from '@/icons/ImagePng.vue'
import PdfFilled from '@/icons/PdfFilled.vue'
import Xmind from '@/icons/Xmind.vue'
import {ref} from 'vue'

const props = defineProps({
  visible: Boolean
})
const emits = defineEmits(['update:visible', 'confirm'])

const exportType = ref('PDF')
const exportName = ref('思维导图')

const exportTypes = [
  {
    name: 'PDF',
    icon: PdfFilled,
    description: '适合打印',
    color: 'var(--el-color-danger)'
  },
  {
    name: 'SVG',
    icon: SvgFilled,
    description: '可缩放矢量图形',
    color: 'var(--el-color-primary)'
  },
  {
    name: 'XMind',
    icon: Xmind,
    description: 'XMind格式',
    color: 'var(--el-color-primary)'
  },
  {
    name: 'PNG',
    icon: ImagePng,
    description: '适合查看分享',
    color: 'var(--el-color-warning)'
  }
]

const handleClose = () => {
  exportType.value = 'PDF'
  emits('update:visible', false)
}

const setExportType = (name) => {
  exportType.value = name
}

const handleExport = () => {
  emits('confirm', {
    type: exportType.value,
    name: exportName.value
  })
}

</script>

<template>
  <el-dialog
      :model-value="visible"
      title="导出"
      append-to-body
      close-on-click-modal
      draggable
      center
      width="490"
      @close="handleClose"
  >
    <div class="padding-lr-17">
      导出文件名称：
      <el-input v-model="exportName" placeholder="输入文件名" clearable maxlength="50" class="w-300"/>
    </div>
    <div class="flex justify-content-between padding-17 gap-20" style="flex-wrap: wrap">
      <el-card
          v-for="item in exportTypes"
          shadow="always"
          class="customer-card"
          :class="exportType === item.name ? 'selected' : ''"
          @click="setExportType(item.name)"
      >
        <el-icon :style="{fontSize: '50px', color: item.color}">
          <component :is="item.icon"/>
        </el-icon>
        <div class="customer-card-item">
          <h1>{{item.name}}</h1>
          <h2>{{item.description}}</h2>
        </div>
      </el-card>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleExport">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.customer-card {
  width: 200px;
  border-radius: 10px;
  cursor: pointer;

  &.selected {
    border-color: var(--el-color-primary);
    border-width: 2px;
  }

  .customer-card-item {
    margin-left: 10px;
    float: right;
    width: 93px;

    h1 {
      font-size: 16px;
      color: var(--el-text-color-primary);
    }

    h2 {
      font-size: 13px;
      color: var(--el-text-color-regular);
      font-weight: normal;
    }
  }
}
</style>